@charset "utf-8";
@import "common";

$topborder:1px solid #878787;
*{
    padding: 0;
    margin: 0;
}
//清浮动
.clearfix{
    clear: both;
}
body{
//  width: 1366px;
    width: 100%;
//  margin: 0 auto;
}
header{
    width: 1366px;
    border-bottom: $topborder;
    margin: 0 auto;
//  logo
    .logo{
        width: 48px;
//      width: 3.51%;
       
        margin-top: 7px;
        margin-left: 21px;
//      margin-left: 1.5;
        float: left;
        .img-wrap{
            img{
                width: 48px;
//              width: 3.51%;
                height: 55px;
                display: block;
            }
        }
        
    }
//  顶部导航栏
    .navbar{
        width: 432px;
//      width: 31.63%;
        height: 16px;
        margin-left: 23%;
        margin-top: 31px;
        float: left;
//      清浮动
        &::after{
            content: "";
            display: block;
            clear: both;
        }
        ul{
            font-size: 0;
            list-style: none;
            li{
                position: relative;
                font-size: 13px;
                margin-right: 11px;
                line-height: 16px;
                float: left;
                
                display: inline-block;
                
                
                margin-right: 42px;
                a{
                    text-decoration: none;
                    color: #444f58;
                    letter-spacing: 0px;
                    
                }
                
                &:last-of-type{
                    margin-right: 0px;
                }
                &:after{
                    clear: both;
                }
//              鼠标经过时的动画效果
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    top: 22px;
                    width: 100%;
                    height: 2px;
                    background-color: $maincolor;
                    transition: transform 0.5s;
                    transform: scaleX(0);
                    transform-origin: 100% 0;
                }
                &:hover{
                    a{
                        color: $maincolor;
                        
                    }
                    &::before{
                            transition: transform 0.5s;
                            transform: scaleX(1);
                            transform-origin: 0 0;
                            background-color: $maincolor;
                        }
                    
                }
                
                
            }
        }
    }
//  搜索栏
    .search{
        width: 190px;
//      width: 13.91%;
        height: 26px;
        margin-left: 26px;
        margin-top: 26px;
        float: left;
        position: relative;
        input[type="text"]{
            border-radius: 12px;
            width: 152px;
//          width: 11.17%;
            height: 24px;
            border: 1px solid #dcdee0;
            outline: none;
            padding-left: 10px;
            padding-right: 26px;
        }
        .tijiao{
            width: 26px;
//          width: 1.90%;
            height: 26px;
            top: 0;
            left: 164px;
            position: absolute;
            border-radius: 50%;
            background-color: $maincolor;
            input[type="image"]{
                width: 11px;
//              width: 0.81%;
                height: 11px;
                margin-left: 8px;
                margin-top: 8px;
                outline: none;
            }
        }
        
    }
    
//  购物车
    .buycar{
        width: 73px;
//      width: 5.34%;
        height: 74px;
        border-left: $topborder;
        margin-left: 22px;
        
        float: left;
        img{
            width: 14px;
//          width: 1.02%;
            height: 14px;
            margin: 32px auto 0px auto;
            display: block;
        }
    }
//  登录
    .login{
        width: 73px;
//      width: 5.34%;
        height: 74px;
        border-left: $topborder;
        float: left;
        img{
            width: 12px;
            height: 14px;
            margin: 31px auto 0px auto;
            display: block;
        }
    }
//  在线客服
    .online{
        width: 103px;
//      width: 7.54%;
        height: 74px;
        border-left: $topborder;
        float: left;
        .online-content{
            width: 71px;
//          width: 5.20%;
            height: 14px;
            margin: 31px auto 0 auto;
            img{
                display: block;
                width: 13px;
//              width: 0.95%;
                height: 14px;
                float: left;
            }
            p{
                font-size: 13px;
                color: #5e5e5e;
                height: 14px;
                line-height: 14px;
                margin-left: 5px;
                float: left;
            }
        }
        
    }
//  更换字体
    .changefont{
        width: 45px;
//      width: 3.29%;
        height: 74px;
        border-left: $topborder;
        float: left;
        a{
            text-decoration: none;
             .changefont-content{
            
               width: 19px;
//             width: 1.39%;
               height: 12px;
               border: $topborder;
               margin: 29px auto 0 auto;
               font-size: 7px;
               text-align: center;
               color: #878787;
               padding: 3px;
            
            
        }
        }
       
        
    }
    
    
    
}


